<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>

<head>
<style>
    data li{

        padding: 5px 0;
        line-height: 20px;
        border-bottom: 1px dashed #ddd;
        color: #666;
        word-break: break-all;
    }
    .blueTag{
        height: 24px;
        display: inline-block;
        margin-right: 8px;
        text-align: center;
        line-height: 24px;
        font-size: 12px;
        font-weight: 600;
        color: #fff;
        border-radius: 3px;
        padding: 0 6px;
        font-weight: normal;   background: #2caef1;
        text-indent: 0;
        border: none;
        font: 14px/1.5 PingFangSC,'helvetica neue','hiragino sans gb',arial,'microsoft yahei ui','microsoft yahei',simsun,sans-serif;
        color: #333;
        outline: 0;
        -webkit-font-smoothing: antialiased;
    }

    .conAPP {
        font-size: 14px;
    }
    .innerPop {
        background: url(${pageContext.request.contextPath}/res/img/innerPop.png);
    }
    .homePop {
        width: 400px;
        height: 292px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -200px;
        margin-top: -150px;
    }
    .appKeyDiv {
        font-size: 16px;
        margin-left: 170px;
        padding-top: 20px;
        color: #35a6e8;
    }
    .homePop .appclose {
        width: 14px;
        height: 14px;
        position: absolute;
        right: 67px;
        top: 26px;
        cursor: pointer;
    }
    .homePop .text {
        width: 320px;
        position: absolute;
        top: 40px;
        left: 35px;
    }
    .appcontent {
        margin-top: 20px;
        height: 25px;
        line-height: 25px;
        padding-left: 50px;
        padding-right: 30px;
    }
    .new-tab {
        margin-top: -2px;
        border-bottom: 1px solid #e5e5e5;
        height: 51px;
    }

    .new-tab .on {
        border-top: 2px solid #3db3ff;
        border-bottom: none;
        background: #fff;
    }
    .new-tab li {
        line-height: 50px;
        height: 50px;
        background: #f9f9f9;
        border-top: 1px solid #e5e5e5;
        border-right: 1px solid #e5e5e5;
        border-bottom: 1px solid #e5e5e5;
        width: 120px;
        padding: 0;
        text-align: center;
    }
    .apinav li {
        padding: 0 30px;
        height: 45px;
        line-height: 45px;
        font-size: 16px;
        float: left;
    }
    .apinav {
        position: relative;
        height: 45px;
    }
    li {
        list-style: none;
    }


</style>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title> - FooTable</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="favicon.ico"> <link href="${pageContext.request.contextPath}/res/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/res/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/res/css/plugins/footable/footable.core.css" rel="stylesheet">

    <link href="${pageContext.request.contextPath}/res/css/animate.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/res/css/style.css?v=4.1.0" rel="stylesheet">

</head>

<body class="fixed-sidebar full-height-layout gray-bg" style="overflow:hidden">
<div id="wrapper">
    <!--左侧导航开始-->
    <c:import url="menu.jsp"></c:import>
    <!--左侧导航结束-->
    <!--右侧部分开始-->
    <div id="page-wrapper" class="gray-bg dashbard-1">
        <div class="row border-bottom">
            <c:import url="navTop.jsp"></c:import>
        </div>
        <div style="height: auto; background-color: #e8f2ff;" class="row J_mainContent" id="content-main">
            <div class="wrapper wrapper-content animated fadeInRight">
                <div class="title">
                    <h2>
                        ${api.data.name}
                    </h2>
                </div>
                <ul class="data">
                    <li style=""><span class="tit">接口地址：</span><p class="con">https://way.jd.com/juxinli/henypot4JD</p></li>
                    <li><span class="tit">请求方式：</span><p class="con">HTTPS GET POST</p></li>
                    <li><span class="tit">请求示例：</span>
                        <p class="con">https://way.jd.com/juxinli/henypot4JD?name=小明&amp;idCard=11011119990101****&amp;phone=18888888888&amp;
                        <strong style=" color: #ff8000;" class="org">appkey=您申请的APPKEY</strong>
                            <c:if test="${user.appkey==null||user.appkey==''}">
                                <button  id="dialog1" class="blueTag" onclick="getKey()" clstag="pageclick|keycount|wxlink_201512091|88">点此获取APPKEY</button>
                            </c:if>

                         </p>
                    </li>
                </ul>
                <nav class="apinav new-tab">
                    <ul>
                        <li id="detailTab1" onclick="showApi();" class="on" clstag="pageclick|keycount|wxlink_201512091|93">
                            <a href="javascript:;">API详情</a></li>
                        <li style="width: 150px;" id="detailTab2" onclick="showError();" clstag="pageclick|keycount|wxlink_201512091|94" class="">
                            <a href="javascript:;">错误参照码</a></li>
                    </ul>
                </nav>
                <div id="apiContent" class="row">
                    <div class="col-sm-12">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <h5>请求参数</h5>
                            </div>
                            <div class="ibox-content">

                                <table class="footable table " >
                                    <thead>
                                    <tr>

                                        <th >名称</th>
                                        <th>类型</th>
                                        <th>必填</th>
                                        <th>示例值</th>
                                        <th>描述</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td>phone</td>
                                        <td>String</td>
                                        <td>是</td>
                                        <td>18888888888</td>
                                        <td>您绑定的手机号</td>
                                    </tr>
                                    <tr>
                                        <td>appkey</td>
                                        <td>String</td>
                                        <td>是</td>
                                        <td>1</td>
                                        <td>您申请的appkey</td>
                                    </tr>
                                    <tr>
                                        <td>apiValue</td>
                                        <td>String</td>
                                        <td>是</td>
                                        <td>4</td>
                                        <td>api对应编号</td>
                                    </tr>
                                    <tr>
                                        <td>method</td>
                                        <td>String</td>
                                        <td>是</td>
                                        <td>1</td>
                                        <td>请求方式编号</td>
                                    </tr>

                                    </tbody>
                                    <tfoot>
                                    <tr>
                                        <td colspan="5">
                                            <ul class="pagination pull-right"></ul>
                                        </td>
                                    </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <h5>返回参数</h5>
                            </div>
                            <div class="ibox-content">

                                <table class="footable table table-stripped toggle-arrow-tiny" data-page-size="8">
                                    <thead>
                                    <tr>

                                        <th >名称</th>
                                        <th>类型</th>
                                        <th>示例值</th>
                                        <th>描述</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <c:forEach items="${api.data.apiAttrs}" var="attr">
                                        <tr>
                                            <td>${attr.name}</td>
                                            <td>${attr.type}</td>
                                            <td>${attr.example}</td>
                                            <td>${attr.desc}</td>
                                        </tr>
                                    </c:forEach>


                                    </tbody>
                                    <tfoot>
                                    <tr>
                                        <td colspan="5">
                                            <ul class="pagination pull-right"></ul>
                                        </td>
                                    </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <h5>返回示例</h5>
                            </div>
                            <div class="ibox-content">
                              <%--返回示例--%>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="errorContent" class="row">
                    <div class="col-sm-12">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <h5>系统级错误码参照：</h5>
                            </div>
                            <div class="ibox-content">

                                <table class="footable table " >
                                    <thead>
                                    <tr>

                                        <th >错误码</th>
                                        <th>说明</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td>10000</td>
                                        <td>错误的请求appkey</td>
                                    </tr>

                                    </tbody>
                                    <tfoot>
                                    <tr>
                                        <td colspan="5">
                                            <ul class="pagination pull-right"></ul>
                                        </td>
                                    </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <!--右侧部分结束-->
    <div class="homePop innerPop conAPP" id="confirmApp" style="display: none">
        <div class="myappKey appKeyDiv">密钥</div>
        <div class="appclose" onclick="closeKey()"></div>
        <div class="text appcontent appKeyCon" style="top:30px;left:25px;">
            这是您在调用服务所需要的密钥，<br>
            可以调用平台所有即用服务。
            <div id="appkeyValue" class="small" style="font-weight: bolder;color:red;">
                ${user.appkey}
            <input type="hidden" name="" id="userAppkey" value="${user.appkey}" >
            </div>
            您可以在接口测试工具及用户中心查看您的<br>
            APPKEY，为了您能够安全调用，请不要将<br>
            密钥给他人使用。
        </div>
    </div>
</div>

<!-- 全局js -->
<script src="${pageContext.request.contextPath}/res/js/jquery.min.js?v=2.1.4"></script>
<script src="${pageContext.request.contextPath}/res/js/bootstrap.min.js?v=3.3.6"></script>
<script src="${pageContext.request.contextPath}/res/js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="${pageContext.request.contextPath}/res/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="${pageContext.request.contextPath}/res/js/plugins/layer/layer.min.js"></script>

<!-- 自定义js -->
<script src="${pageContext.request.contextPath}/res/js/hAdmin.js?v=4.1.0"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/res/js/index.js"></script>

<!-- 第三方插件 -->
</body>


</html>
<script>
    $(function(){
         $("#errorContent").hide();
    });

    function getKey() {
        var appkey = $("#userAppkey").val();
        if(appkey==""){
            $.ajax({
                type: "post",
                url: "${pageContext.request.contextPath}/getkey.do",
                dataType: "json",
                success:function(data) {
                    console.log(data);
                    if(data.status==1){
                        $("#appkeyValue").html(data.data.appkey);
                        $("#confirmApp").show();
                    }else{
                        alert(data.msg);
                    }
                }
            });
        }else{
            $("#confirmApp").show();
        }


    }
    function closeKey() {
        $("#confirmApp").hide();
    }
    function showApi() {

        $("#errorContent").hide();
        $("#detailTab2").removeClass("on");
        $("#apiContent").show();
        $("#detailTab1").addClass("on");

    }
    function showError() {
        $("#errorContent").show();
        $("#detailTab2").addClass("on");
        $("#apiContent").hide();
        $("#detailTab1").removeClass("on");
    }
</script>